<template>
  <div class="productlist">
    <el-row :gutter="20">
      <el-col v-for="(i,j) in data" :key="j" :md="8" :sm="12" :xs="12">
        <el-card :body-style="{ padding: '0px' }" shadow="hover" v-loading="loading">
          <img :src="i.image[0]" class="image" />
          <div class="container">
            <h4 class="title">{{i.subtitle}}</h4>
            <div class="content">{{i.intro}}</div>
            <div class="footer">
              <time class="time">{{i.update_time}}</time>
              <el-button
                type="text"
                class="button"
                @click="toProduct(i.id)"
              >
                了解详细
                <i class="el-icon-d-arrow-right"></i>
              </el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    toProduct(id) {
      this.$router.push({
        path: `/user/product/${id}`
      })
    }
  },
  props: ['data', 'loading']
}
</script>

<style lang="less" scope>
.productlist {
  .el-card {
    margin-bottom: 10px;
  }
  .image {
    height: 243px;
    display: block;
    margin: 0 auto;
  }
  .container {
    height: 190px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .title {
      color: #3b3b3b;
      text-align: center;
    }
    .content {
      color: #606060;
      font-size: 14px;
    }
    .footer {
      display: flex;
      justify-content: space-between;
      .time {
        font-size: 13px;
        color: #999;
        padding: 12px 0;
      }
    }
  }
}
</style>
